<template>
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-gray-800 text-white">
      <!-- 可折叠菜单 -->
      <div class="p-4">
        <button @click="isSidebarOpen = !isSidebarOpen" class="text-white">
          <span v-if="isSidebarOpen">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </span>
          <span v-else>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </span>
        </button>
      </div>
      <div v-show="isSidebarOpen" class="p-4">
        <!-- 侧边栏内容 -->
        <ul>
          <li class="p-2"><a href="#" class="block hover:bg-gray-700">菜单项1</a></li>
          <li class="p-2"><a href="#" class="block hover:bg-gray-700">菜单项2</a></li>
          <li class="p-2"><a href="#" class="block hover:bg-gray-700">菜单项3</a></li>
        </ul>
      </div>
    </aside>

    <!-- 内容区域 -->
    <div class="flex-1 flex flex-col">
      <!-- Header -->
      <header class="bg-blue-500 text-white p-4">
        <h1 class="text-2xl">Header</h1>
      </header>

      <!-- Main Content -->
      <main class="flex-1 p-4">
        <RouterLink to="/"/>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RouterLink } from 'vue-router';

const isSidebarOpen = ref(true);
</script>

<style scoped>
</style>
